<template>
  <div class="hello">
    <SDialog
      :onCancel="callback"
      :title="itemId ? ('修改基础信息') : ('创建新项目')"
      width="500px"
      :onOK="formSubmit"
    >
      <div class="p-6">
        <div v-show="false">
          <el-radio-group v-model="infoForm.itemType">
            <el-radio label="1">{{ ('常规项目') }}</el-radio>
            <el-radio label="4">{{ ('电子表格') }}</el-radio>
            <el-radio label="2">
              {{ ('单页项目') }}
              <el-tooltip
                effect="dark"
                :content="('单页项目指的是指没有目录结构，只有一个页面的项目')"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-radio>
          </el-radio-group>
        </div>
        <el-row class="leading-10 mb-4">
          <el-col :span="4">&nbsp;&nbsp;{{ ('项目名称') }} : </el-col>
          <el-col :span="20">
            <el-input
              type="text"
              auto-complete="off"
              v-model="infoForm.itemName"
            ></el-input
          ></el-col>
        </el-row>
        <el-row class="leading-10 mb-4">
          <el-col :span="4">{{ ('项目描述') }} : </el-col>
          <el-col :span="20">
            <el-input
              type="text"
              auto-complete="off"
              v-model="infoForm.itemDescription"
            ></el-input
          ></el-col>
        </el-row>
        <el-row class="leading-10 mb-4">
          <el-col :span="4">{{ ('可访问性') }} : </el-col>
          <el-col :span="20">
            <el-select class="w-full" v-model="isOpenItem" placeholder="">
              <el-option :value="true" :label="('公开项目')"> </el-option>
              <el-option :value="false" :label="('私密项目')">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="leading-10 mb-4" v-show="!isOpenItem">
          <el-col :span="4">&nbsp;</el-col>
          <el-col :span="20">
            <el-input
              type="password"
              auto-complete="off"
              v-model="infoForm.password"
              :placeholder="('访问密码')"
            ></el-input
          ></el-col>
        </el-row>
      </div>
    </SDialog>
  </div>
</template>

<script>
import { addItem,updateItem } from '@/api/item.ts'
export default {
  name: 'Login',
  components: {},
  props: {
    callback: {
      type: Function,
      required: false,
      default: () => {}
    },
    defaultItemType: {
      type: String || Number,
      required: false,
      default: '1'
    },
    itemId: {
      type: String || Number,
      required: false,
      default: 0
    }
  },
  data() {
    return {
      infoForm: {
        itemName: '',
        itemDescription: '',
        itemDomain: '',
        password: '',
        itemType: '1'
      },
      isOpenItem: true
    }
  },
  methods: {
    formSubmit() {
      if (!this.isOpenItem && !this.infoForm.password) {
        this.$alert(('私密项目请设置访问密码'))
        return false
      }
      if (this.isOpenItem) {
        this.infoForm.password = ''
      }

      if (this.itemId) {
        updateItem(
          {
          itemId: this.itemId,
          itemName: this.infoForm.itemName,
          itemDescription: this.infoForm.itemDescription,
          itemDomain: this.infoForm.itemDomain,
          password: this.infoForm.password,
          isOpenItem: this.isOpenItem
        }).then(data => {
          this.$message.success(data.msg)
          this.callback()
        })
      } else {
        debugger;
        addItem(
          {
            itemType: this.infoForm.itemType,
            itemName: this.infoForm.itemName,
            itemDescription: this.infoForm.itemDescription,
            itemDomain: this.infoForm.itemDomain,
            password: this.infoForm.password,
            isOpenItem: this.isOpenItem
          }
        ).then(data => {
          if (data.code === 1) {
            //成功
            this.callback()
          } else {
            //失败
            this.$alert(data.msg)
          }
        })
      }
    },
    getItemDetail(itemId) {
      // this.request('/api/item/detail', {
      //   itemId: itemId
      // }).then(data => {
      //   const json = data.data
      //   if (json.password) {
      //     this.isOpenItem = false
      //   } else {
      //     this.isOpenItem = true
      //   }
      //   this.infoForm.itemName = json.itemName
      //   this.infoForm.itemDescription = json.itemDescription
      //   this.infoForm.itemDomain = json.itemDomain
      //   this.infoForm.password = json.password
      //   this.infoForm.itemType = json.itemType
      // })
      this.$alert("getItemDetail 方法执行")
    }
  },

  mounted() {
    this.infoForm.itemType = this.defaultItemType
    if (this.itemId) {
      this.getItemDetail(this.itemId)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
